<template>
  <section>
    <ul class="d-flex flex-wrap-wrap">
      <li class="li" v-for="books in booksList" :key="books.id">
        <div class="cover">
          <img v-lazy="books.booksVo.booksCover" alt />
        </div>
        <h2>{{books.booksVo.booksName}}</h2>

        <div class="close text-center" @click="deleteThisBook(books.id)">
          <i class="cubeic-close"></i>
        </div>
      </li>
    </ul>
  </section>
</template>

<script>
import {deleteBooksShelf} from 'api/BooksShelfApi'

export default {
  name: "BooksList",
  props: {
    booksList: Array
  },
  data() {
    return {};
  },
  methods: {
    deleteThisBook(id) {
      this.$createDialog({
        type: 'confirm',
        content: '确定要删除该小说么？',
        title: '提示框',
        confirmBtn: {
          text: '删除',
          active: true,
          disabled: false,
          href: 'javascript:;'
        },
        cancelBtn: {
          text: '取消',
          active: false,
          disabled: false,
          href: 'javascript:;'
        },
        onConfirm: () => {
          // this.isEdit = !isEdit
          deleteBooksShelf({id})
            .then(res => {
              if(res.meta.success) {
                this.$emit('notifyChangeBooksShelfList');
              }
            });
        }
      }).show()
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl';

ul {
  padding: 2vw;

  .li {
    height: 43vw;
    flex: 0 0 28vw;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-right: 6vw;
    margin-bottom 15px
    position relative

    .close {
      position absolute
      right -5px
      top -10px
      width 20px
      height 20px
      border-radius 50%
      line-height 20px
      color #FFF

      background $colorPrimaryDark
    }

    &:nth-child(3n) {
      margin-right: 0;
    }

    &.add {
      i {
        font-size: 30px !important;
        color: #21212194;
      }
    }

    .cover {
      width: 28vw;
      height: 36vw;

      img {
        width: 100%;
        height: 100%;
      }
    }

    h2 {
      font-size: 14px;
      line-height: 24px;
      text-indent: 4px;
      width: 28vw;
      ellipsis()
    }
  }
}
</style>
